<template>
  <div class="login">
    <Row class="vm-login">
      <Col span="10" class="login-form">
        <div class="login-header">
          <img src="../../assets/images/logo.png" height="80" alt="">
          <p><span>VUE</span>MANAGER</p>
        </div>
        <div class="login-form">
          <Input class="form-input" v-model="username" placeholder="please enter username"></Input>
          <Input class="form-input" v-model="password" type="password" placeholder="Please enter password"></Input>
          <Button type="primary">Login</Button>
        </div>
        <div class="login-footer">
          <Checkbox v-model="remember">Remember</Checkbox>
          <span class="forget"><a href="#">Forget Password</a></span>
        </div>
      </Col>
      <Col span="14" class="login-ad">
        <span class="photo-author">Photo: Jure Kravanja</span>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  name: 'VmLogin',
  data: function () {
    return {
      username: '',
      password: '',
      remember: false
    }
  }
}
</script>
<style lang="stylus" scoped>
.login
  display: flex
  justify-content: center
  align-items: center
  position: absolute
  height: 100%
  width: 100%
  .vm-login
    width: 900px
    height: 400px
    &>div
      padding: 30px
    .login-form
      display: flex
      flex-direction: column
      justify-content: center
      .login-header
        text-align: center
        font-size: 16px
        font-weight: bold
        margin-bottom: 20px
        span
          color: #41b883
      .login-form
        .form-input
          margin-bottom: 20px
          width: 100%
          height: 45px
        button
          height: 45px
          width: 100%
      .login-footer
        margin-top: 10px
        span.forget
          float: right
    .login-ad
      height: 100%
      font-weight: bold
      font-size: 14px
      border-radius: 0
      background: url("../../assets/images/login-bg.jpg")
      .photo-author
        position: absolute
        right: 6px
        bottom: 45px
</style>
